PR para correção e comentários #6
Conversation
Aceito - Header, Topo do site completo.
Adicionado o body da página
Aba sobre feita
gabriel-contato
Verão final projeto semana3
paula-aribeiro
left a comment
paula-aribeiro
left a comment
There was a problem hiding this comment.
Oi pessoal, parabéns pelo trabalho em equipe para construir a landing page de vocês, ficou muito legal!
As páginas comunicaram bem o produto e a empresa que passamos. Vocês também fizeram uma boa escolha de cores e fonte baseando na logomarca. O layout ficou show! Gostei que vocês tiveram o cuidado de padronizar o menu em todas as páginas, a usabilidade ficou bem fluida. Um ponto negativo foi o excesso de target="_blank" para abrir páginas em outras guias. Ele é mais indicado quando o link é externo. Caso contrário, seu site abre muitas páginas no navegador do usuário (e ele fica bravo hehe)
Em relação ao código, tem alguns erros de organização que comentei abaixo, mas no geral vocês fizeram um bom uso do HTML5, o CSS está bem comentado e vocês foram um dos poucos grupos que fizeram deploy 😄
Muito bem pessoal, continuem evoluindo 🚀
| <p>Nossos produtos</p><br> | ||
| <p>Conheça os seguros que a 4Safe oferece e escolha o ideal para você.</p><br> |
There was a problem hiding this comment.
Não use br para ajustar o espaçamento, prefira usar o CSS (padding e margin) para isso
There was a problem hiding this comment.
Sim, bem observado! Me pergunto por quê coloquei ele.... rsrs
| <footer> | ||
| <section id="firstSectionFooter"> | ||
| <div> | ||
| <div id="subtitleFooter"> | ||
| <h3>Entre em contato conosco clicando abaixo!</h3> | ||
| </div> | ||
| <div id="linkFooter"> | ||
| <a href="contact.html" target="_blank"><img src="img/chat (1).svg" width="70px" height="70px"></a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="secondSectionFooter"> | ||
| <div> | ||
| <p>4Safe ®</p> | ||
| </div> | ||
| <div id="iconFooter"> | ||
| <img src="img/facebook.png" width="30px" height="30px"> | ||
| <img src="img/instagram.png" width="30px" height="30px"> | ||
| </div> | ||
| </div> | ||
|
|
||
| </section> | ||
| </footer> |
| <img src="img/facebook.png" width="30px" height="30px"> | ||
| <img src="img/instagram.png" width="30px" height="30px"> |
There was a problem hiding this comment.
Faltou o link para as redes sociais
| color: white; | ||
| } | ||
|
|
||
| a:houver { |
There was a problem hiding this comment.
Aqui deveria ser hover e não "houver"
| * { | ||
| margin: 0px; | ||
| padding: 0px; | ||
| list-style: none; | ||
| font-family: 'Arial', sans-serif; | ||
| font-size: 16pt; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: white; | ||
| } | ||
|
|
||
| a:houver { | ||
| cursor: pointer; | ||
| } | ||
| /* Costomização header */ | ||
|
|
||
| #logo4safe { | ||
| max-height: 110px; | ||
| } | ||
|
|
||
| .header { | ||
| background-color: #3b4f66; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .menu { | ||
| display: flex; | ||
| } | ||
|
|
||
| .menu li { | ||
| margin-left: 25px; | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .linha { | ||
| height: 10px; | ||
| background-color: #9bd46d; | ||
| } | ||
|
|
||
| @media (max-width: 450px) { | ||
| .menu { | ||
| padding-top: 10px; | ||
| } | ||
| #firstSectionFooter { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| #imgFooter { | ||
| display: flex; | ||
| width: auto; | ||
| } | ||
| #formDiv { | ||
| margin: 15px; | ||
| } | ||
| footer { | ||
| height: auto; | ||
| } | ||
| #message { | ||
| width: 183px; | ||
| height: 50px; | ||
| } | ||
| #subtitleFooter h3 { | ||
| font-size: 12pt; | ||
| } | ||
| #secondSectionFooter p { | ||
| font-size: 10pt | ||
| } | ||
| } | ||
| /*FIM-HEADER*/ | ||
| /*SEÇÃO*/ |
| #sectionsobre { | ||
| display: flex; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| margin-top: 80px; | ||
| margin-bottom: 80px; | ||
| } |
There was a problem hiding this comment.
Essa página ficou com o texto muito próximo da borda, tanto no modelo desktop
quanto no mobile
| <header class="header"> | ||
| <img id="logo4safe" src="./img/logocabecario.png"> | ||
|
|
||
| <nav> | ||
| <ul class="menu"> | ||
| <li><a target="_blank" href="sobre.html">Sobre</a></li> | ||
| <li><a target="_blank" href="produtos.html">Produtos</a></li> | ||
| <li><a target="_blank" href="contact.html">Contato</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> |
| <div id="mainTitle"> | ||
| <h3>Preencha o formulario</h3> | ||
| </div> | ||
| <div id="formMain"> | ||
| <div id="formDiv"> | ||
| <p>A 4safe agradece o seu interesse em entrar em contato conosco, responderemos o mais breve possível. | ||
| <p> | ||
| <form id="formContainer"> | ||
| <div> | ||
| <label for="name">Seu Nome?</label> | ||
| <br> | ||
| <input type="text" id="name" /> | ||
| </div> | ||
| <div> | ||
| <label for="e-mail">Seu E-mail:</label> | ||
| <br> | ||
| <input type="email" id="mail" /> | ||
| </div> | ||
| <div> | ||
| <label for="message">Sua Mensagem:</label> | ||
| <br> | ||
| <textarea id="message"></textarea> | ||
| </div> | ||
| <div class="button"> | ||
| <button id="formButton" type="submit">Enviar</button> | ||
| </form> | ||
|
|
||
| </div> | ||
| </div> |
| #formButton { | ||
| box-shadow: -4px 5px 8px 0px #313738; | ||
| background: linear-gradient(to bottom, #385f71 5%, #3b4f66 100%); | ||
| background-color: #59a2bd; | ||
| border-radius: 7px; | ||
| border: 1px solid #36607b; | ||
| cursor: pointer; | ||
| color: #ffffff; | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| padding: 6px 15px; | ||
| text-decoration: none; | ||
| text-shadow: 0px 1px 0px #3d768a; | ||
| } |
| #formButton { | ||
| margin-top: 5px | ||
| } |
4 participants
No description provided.